<template>
  <div class='menu-list-container'
       :class="{'listHeight':checked=== false}">
    <h2 class="title">
      便捷导航
      <div>
        <el-checkbox v-model="checked">默认高度</el-checkbox>
        <span @click="setMenuDialogVisible=true">设置</span>
      </div>
    </h2>
    <ul class="menu-list">
      <li @click="goPage(item)"
          v-for="(item, index) in menuList.list"
          :key="index"
          class="menu-item">
        <i :class="[item.menu_css==='' || !item.menu_css ? 'fa fa-bars' : 'fa',item.menu_css]"></i>
        {{item.menu_name}}
      </li>
    </ul>
    <el-dialog :visible.sync="setMenuDialogVisible"
               append-to-body
               :modal-append-to-body='false'
               title="快捷导航">
      <el-transfer v-model="choosedMenuList"
                   :titles="['菜单列表','快捷列表']"
                   :data="allMenuList"
                   :props="options"></el-transfer>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="setMenuDialogVisible = false">取 消</el-button>
        <el-button @click="saveChoosedMenu"
                   type="primary">保 存</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import { userPermissionApi } from "@/services/UserPermission";
import { HomeApi } from '@/services/Home'
export default {
  data () {
    return {
      sideNav: [],
      checked: true,
      menuList: {
        list: []
      },
      options: {
        key: 'route_url',
        label: 'menu_name'
      },
      // 所有菜单的平铺列表
      allMenuList: [],
      // 已选择的菜单列表
      choosedMenuList: [],
      // 设置常用菜单弹框是否可见
      setMenuDialogVisible: false,
      menuMap: new Map()
    }
  },
  methods: {
    // 跳转页面
    goPage (item) {
      this.$router.push({
        path: item.route_url
      })
    },
    // 保存已选择的菜单
    saveChoosedMenu () {
      let menu_routes = []
      this.choosedMenuList.map((item) => {
        let val = this.menuMap.get(item)
        if (val) {//val不能为undefined
          menu_routes.push({
            menu_name: val.menu_name,
            route_url: val.route_url
          })
        }
      })
      HomeApi.saveNavigation({
        data: {
          menu_routes: menu_routes
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('保存成功')
          this.getChoosedMenuList()
          this.setMenuDialogVisible = false
        }
      })

    },
    // 获取菜单
    getMenuTree () {
      let userId = window.localStorage.getItem("user_id");
      userPermissionApi
        .getMenuTree({
          data: {
            user_id: userId
          }
        })
        .then(res => {
          if (res.data.list.length > 0) {
            this.allMenuList = []
            this.handleMenuTree(res.data.list)
            this.allMenuList.forEach(item => {
              this.menuList.list.forEach(ele => {
                if (item.menu_name === ele.menu_name) {

                  this.$set(ele, 'menu_css', item.menu_css)
                }
              })
            })
          }
        });
    },
    // 处理菜单树
    handleMenuTree (list) {
      if (list && list.length > 0) {
        list.map((item) => {
          if (item.is_dir === '0') {
            this.menuMap.set(item.route_url, item)
            this.allMenuList.push(item)
          } else {
            this.handleMenuTree(item.children_list)
          }
        })
      }
    },
    // 获取已保存菜单列表
    getChoosedMenuList () {
      HomeApi.getNavigationList({
      }).then(res => {
        if (res.code === 0) {
          let choosed = []
          res.data.list.map((item) => {
            choosed.push(item.route_url)
          })
          this.choosedMenuList = choosed
          this.menuList.list = res.data.list
        }
      })
    },
  },
  created () {
    let store = this.$store.state.sideNav
    let local = window.localStorage.getItem('platFormSideNav') || '[]'
    local = JSON.parse(local)
    this.sideNav = store.length > 0 ? store : local
    this.getMenuTree()
    this.getChoosedMenuList()
    // this.menuList.list = [
    //   { name: '工程案例库', router: '/libList' },
    //   { name: '检查项数据库', router: '/checkItemList' },
    //   { name: '项目文档库', router: '/projectFile' },
    //   { name: '项目管理', router: '/projectList' },
    //   { name: '咨询项管理', router: '/issueList' },
    //   { name: '实测实量统计', router: '/actualMeasurementAccount' },
    //   { name: '质量检查统计', router: '/qualityCheckAccount' }
    // ]
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.listHeight {
  height: 370px !important;
}
.menu-list-container {
  overflow: scroll;
  width: 100%;
  height: 100%;
  // height: 180px;
  background-color: #fff;
  .title {
    height: 54px;
    display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #d8d8d8;
    font-weight: normal;
    span {
      margin-left: 10px;
      font-size: 14px;
      color: #1890ff;
      cursor: pointer;
    }
  }

  .menu-list {
    width: 100%;
    // height: 145px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;
    /*滚动条样式*/
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
      opacity: 0;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
      opacity: 0;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
      opacity: 0;
    }
    .menu-item {
      text-align: center;
      width: 33%;
      color: #333;
      font-size: 14px;
      margin-bottom: 25px;
      cursor: pointer;
      &:hover {
        color: #188fff;
      }
      i {
        display: block;
        font-size: 37px;
        text-align: center;
      }
    }
  }
  .el-transfer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>